<%-- 
    Document   : uploadImage
    Created on : Aug 27, 2013, 11:38:17 AM
    Author     : C@T
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Change Photos</title>
        <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                Test = {
                    UpdatePreview: function(obj) {

                        var fuData = document.getElementById('imageUpload');
                        var FileUploadPath = fuData.value;
                        var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
                        if (Extension == "gif" || Extension == "png" || Extension == "jpg") {
                            //valid file size
                            var uploadedFile = document.getElementById('imageUpload');
                            var fileSize = uploadedFile.files[0].size;
                            var fileMaxSize = fileSize / 1024 / 1024;
                            if (fileMaxSize > 3) {
                                //Disable button save
                                document.getElementById('uploadButton').disabled = true;
                                alert("File must less than 3Mb");
                            } else {
                                // if IE < 10 doesn't support FileReader
                                if (!window.FileReader) {
                                    // don't know how to proceed to assign src to image tag
                                } else {
                                    var reader = new FileReader();
                                    var target = null;

                                    reader.onload = function(e) {
                                        target = e.target || e.srcElement;
                                        $("#imgUpPreview").prop("src", target.result);
                                    };
                                    reader.readAsDataURL(obj.files[0]);
                                }
                                //Enable button save
                                document.getElementById('uploadButton').disabled = false;
                            }
                        }
                        else {
                            //Disable button save
                            document.getElementById('uploadButton').disabled = true;
                            alert("Not valid file type! File must be .jpg, .png, .gif"); // Not valid file type
                        }
                    }
                };
            });

        </script>
        <style type="text/css">
            span.wrap { padding: 10px;}
            span.wrap.new { margin-left: 30px; }
            span.wrap label { margin-bottom: 5px; }
            input#imageUpload { width: 400px; height: 20px }
            span.wrap form { margin: 0; }
        </style>
        <title>Change Avatar</title>
    </head>
    <body>
        <div align="center">
            <div align="left" style="height: auto; width: 800px">
                <jsp:include page="master.jsp"/>
            </div>
            <div align="left" style="height: 400px; width: 800px">
                <div class="wrap">
                    <div style="float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC;">
                        <%
                            if (request.getSession().getAttribute("avatar") != null) {
                                out.println("<img id='imgUpPreview' src='avatar/" + request.getSession().getAttribute("avatar").toString() + "' width='100px' height='100px' border='0' alt='User'/>");
                            } else {
                                response.sendRedirect("index.jsp");
                            }
                        %>
                    </div>
                    <span class="wrap new">
                        <form id="testForm" action="ChangeAvatar" method="post" enctype="multipart/form-data">
                            <label class="text-nomarl-reb">Please choose the photos:</label>
                            <input type="file" id="imageUpload" name="imageUpload"  accept=".jpg,.png,.gif" onchange='Test.UpdatePreview(this);'/>
                            <button type="submit" id="uploadButton" style="display: block; margin-top: 10px; width: 50px; height: 35px" class="gwt-Button" disabled="true" >Save</button>
                        </form>
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>
